<template>
  <div class="app-container">
    <!-- <switch-roles @change="handleRolesChange" /> -->
    <!-- <div :key="key" style="margin-top:30px;">
      <div>
        <span v-permission="['admin']" class="permission-alert">
          Only
          <el-tag class="permission-tag" size="small">admin</el-tag> can see this
        </span>
        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
          v-permission="['admin']"
        </el-tag>
      </div>

      <div>
        <span v-permission="['editor']" class="permission-alert">
          Only
          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
        </span>
        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
          v-permission="['editor']"
        </el-tag>
      </div>

      <div>
        <span v-permission="['admin','editor']" class="permission-alert">
          Both
          <el-tag class="permission-tag" size="small">admin</el-tag> and
          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
        </span>
        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
          v-permission="['admin','editor']"
        </el-tag>
      </div>
    </div>

    <div :key="'checkPermission'+key" style="margin-top:60px;">
      <aside>
        In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
        <br> e.g.
      </aside>

      <el-tabs type="border-card" style="width:550px;">
        <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
          Admin can see this
          <el-tag class="permission-sourceCode" type="info">
            v-if="checkPermission(['admin'])"
          </el-tag>
        </el-tab-pane>

        <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
          Editor can see this
          <el-tag class="permission-sourceCode" type="info">
            v-if="checkPermission(['editor'])"
          </el-tag>
        </el-tab-pane>

        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
          Both admin or editor can see this
          <el-tag class="permission-sourceCode" type="info">
            v-if="checkPermission(['admin','editor'])"
          </el-tag>
        </el-tab-pane>
      </el-tabs>
    </div> -->
	<div class="btns">
		<div class="headItem">
			<el-button type="primary">全部开启</el-button>
		</div>
		<div class="headItem">
			<el-button type="primary">全部关闭</el-button>
		</div>
		<div class="headItem">
			<el-button type="primary">修改确认</el-button>
		</div>
		<div class="headItem headItem1">
			是否显示已关闭游戏
			<el-switch v-model="isswitch" active-color="#13ce66" inactive-color="#d6d6d6" />
		</div>
	</div>
	<div class="con">
		<div class="left">
			<div class="left-top">
				<div class="lt-item">游戏前台排序号</div>
				<div class="lt-item1">游戏名称</div>
				<div class="lt-item">在线人数</div>
				<div class="lt-item1">游戏前台图标更换</div>
				<div class="lt-item">是否开启预测</div>
				<div class="lt-item">开启游戏</div>
			</div>
			<div class="left-con">
				<div class="lt-item">900</div>
				<div class="lt-item1">极速时时莎</div>
				<div class="lt-item">1280</div>
				<div class="lt-item1">
					<el-upload
					  class="avatar-uploader"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="lt-item">
					<el-switch v-model="isswitch1" active-color="#13ce66" inactive-color="#d6d6d6" />
				</div>
				<div class="lt-item">
					<el-switch v-model="isswitch2" active-color="#13ce66" inactive-color="#d6d6d6" />
				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-title">聊天室设置</div>
			<div class="right-item1">
				<div class="ri-left">禁言设置</div>
				<div class="ri-right">
					<el-checkbox
					  label="是否禁言"
					/>
				</div>
			</div>
			<div class="right-item1">
				<div class="ri-left">名称设置</div>
				<div class="ri-right">
					<el-input placeholder="请输入名称" class="remarkInput" />
				</div>
			</div>
			<div class="right-item2">
				<div class="ri2-left">聊天室头像设置</div>
				<div class="ri2-right">
					<div class="ri2-right-con">
						<img src="" alt="" />
					</div>
				</div>
			</div>
			<div class="right-item1">
				<div class="ri-left">屏幕设置、关键词用 | 隔开</div>
				<div class="ri-right">
					<el-input placeholder="请输入要屏蔽的关键词用 | 隔开" class="remarkInput" />
				</div>
			</div>
			<div class="right-item3">
				<div class="ri3-left">自动回复设置</div>
				<div class="ri3-right">
					<div class="ri3-right-item">
						<div style="padding-top: 8px;">输入内容</div>
						<textarea class="textarea" placeholder="输入自动回复关键词" cols="30" rows="10"></textarea>
					</div>
					<div class="ri3-right-item">
						<div style="padding-top: 8px;">回复内容</div>
						<textarea class="textarea" placeholder="输入自动回复内容" cols="30" rows="10"></textarea>
					</div>
				</div>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import SwitchRoles from './components/SwitchRoles'

export default {
  name: 'DirectivePermission',
  components: { SwitchRoles },
  directives: { permission },
  data() {
    return {
      key: 1 ,// 为了能每次切换权限的时候重新初始化指令
	  isswitch:false,
	  isswitch1:false,
	  isswitch2:false,
	  imageUrl:''
    }
  },
  methods: {
    checkPermission,
    handleRolesChange() {
      this.key++
    },
	handleAvatarSuccess(res, file) {
		this.imageUrl = URL.createObjectURL(file.raw);
	},
	beforeAvatarUpload(file) {
		const isJPG = file.type === 'image/jpeg';
		const isLt2M = file.size / 1024 / 1024 < 2;

		if (!isJPG) {
		  this.$message.error('上传头像图片只能是 JPG 格式!');
		}
		if (!isLt2M) {
		  this.$message.error('上传头像图片大小不能超过 2MB!');
		}
		return isJPG && isLt2M;
	}
  }
}
</script>

<style lang="scss" scoped>
*{
	box-sizing: border-box;
}
.app-container {
  ::v-deep .permission-alert {
    width: 320px;
    margin-top: 15px;
    background-color: #f0f9eb;
    color: #67c23a;
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
  }
  ::v-deep .permission-sourceCode {
    margin-left: 15px;
  }
  ::v-deep .permission-tag {
    background-color: #ecf5ff;
  }
}
.btns{
  	width: 100%;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
}
.headItem {
  	display: flex;
  	align-items: center;
  	font-size: 13px;
  	font-weight: 500;
}
.headItem .el-button--medium {
  	padding: 5px 6px;
  	font-size: 12px;
  	margin-left: 5px;
  	background-color: #c345cc;
  	border-radius: 4px;
  	border-color: #c345cc;
}
.headItem1{
	margin-left:20px;
}
.el-switch{
	margin-left:10px;
}
.con{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 14px;
	color: #606266;
}
.left{
	width: 59.5%;
	height: fit-content;
	border: 1px solid #aaaeb1;
}
.right{
	width: 39.5%;
	border: 1px solid #aaaeb1;
}
.left-top{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #474747;
	background-color: #eaeaea;
	height: 30px;
	border-bottom: 1px solid #aaaeb1;
}
.left-con{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #474747;
	height: 40px;
	border-bottom: 1px solid #aaaeb1;
}
.left-con:last-child{
	border-bottom: 0;
}
.lt-item{
	width: 15%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: 1px solid #aaaeb1;
}
.lt-item:last-child{
	border-right: 0;
}
.lt-item1{
	width: 20%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: 1px solid #aaaeb1;
}
.lt-item1 .avatar-uploader{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 1px solid #EBEEF5;
}
.right-title{
	width: 100%;
	color: #474747;
	display: flex;
	justify-content: flex-start;
	padding-left: 14px;
	align-items: center;
	background-color: #eaeaea;
	height: 30px;
	border-bottom: 1px solid #aaaeb1;
}
.right-item1{
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #aaaeb1;
}
.ri-left{
	width: 40%;
	height: 40px;
	line-height: 40px;
	border-right: 1px solid #aaaeb1;
	font-size: 14px;
	color: #606266;
	padding-left: 14px;
}
.ri-right{
	width: 60%;
	height: 40px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 20px;
}
.remarkInput {
	height: 30px;
	line-height: 30px;
	width: 90%;
	font-size: 13px;
}

::v-deep .remarkInput .el-input__inner {
	height: 30px;
	text-align: left;
	line-height: 30px;
	border-color: #EBEEF5;
}
.right-item2{
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #aaaeb1;
}
.ri2-left{
	width: 40%;
	height: 50px;
	line-height: 50px;
	border-right: 1px solid #aaaeb1;
	font-size: 14px;
	color: #606266;
	padding-left: 14px;
}
.ri2-right{
	width: 60%;
	height: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 20px;
}
.ri2-right-con{
	width: 90%;
	height: 36px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border: 1px solid #EBEEF5;
	border-radius: 5px;
	padding-left: 10px;
}
.ri2-right-con img{
	width: 30px;
	height: 30px;
	border-radius: 50%;
}
.right-item3{
	width: 100%;
	height: 130px;
	display: flex;
	justify-content: space-between;
}
.ri3-left{
	width: 40%;
	height: 130px;
	line-height: 40px;
	border-right: 1px solid #aaaeb1;
	font-size: 14px;
	color: #606266;
	padding-left: 14px;
}
.ri3-right{
	width: 60%;
	height: 130px;
	padding-left: 20px;
}
.ri3-right-item{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding-top: 10px;
	padding-right: 5px;
}
.textarea{
	flex: 1;
	height: 50px;
	margin-left: 5px;
	border: 1px solid #aaaeb1;
	border-radius: 5px;
	padding: 5px;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
	background-color: #c345cc;
	border-color: #c345cc;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
	color: #606266;
}
</style>

